<template>
    <div>
        <Table :columns="columns" no-data-text="没有任何数据" no-filtered-data-text="没有任何数据" border
               :data="checkedItems" class="margin-top-10" @on-select="select" @on-select-cancel="selectCancel"
               @on-select-all="selectAll" @on-select-all-cancel="selectAllCancel" :loading="loading">
        </Table>
        <Page show-sizer show-total :total="totalCount" class="margin-top-10" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size="pageSize" :current="currentPage"
              :page-size-opts="[pageSize]">

        </Page>
    </div>
</template>

<script lang="ts">
import {Component, Prop, Watch} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';

@Component({
    components: {},
})
export default class IPSelect extends AbpBase {
    name: string = 'IPSelect';

    @Prop({type: Array, default: () => []}) value: Array<{ id: number, range: string }>;
    @Prop({type: Array, default: () => []}) columns: any[];
    @Prop({type: Array, default: () => []}) items: any[];
    @Prop({type: Number, default: 0}) totalCount: number;
    @Prop({type: Number, default: 1}) defaultPage: number;
    @Prop({type: Number, default: 5}) pageSize: number;
    loading: boolean = false;
    currentPage: number = 1;


    get checkedItems() {
        let temp = this.items;
        if (temp) {
            temp = temp.map((item) => {
                if (this.value) {
                    item._checked = this.value.some((i) => {

                        return i.range === item.range;
                    });
                }
                return item;
            });
        }
        return temp;
    }

    @Watch('defaultPage')
    defaultPageChange() {
        this.currentPage = 1;
        this.$emit('on-change', {

            maxResultCount: this.pageSize,
            skipCount: (this.currentPage - 1) * this.pageSize,

        });
    }

    selectAll(selection: any) {
        let all = selection.map((item) => {
            return {id: item.id, range: item.range};
        });
        this.$emit('input', this.value.concat(all.filter((item) => {

            return !this.value.some((i) => {

                return i.range === item.range;
            });
        })));
    }

    selectAllCancel(selection: any) {
        let unAll = this.items.map((item) => {
            return {id: item.id, range: item.range};
        });
        this.$emit('input', this.value.concat(unAll).filter((item) => {

            return this.value.some((i) => {

                return i.range === item.range;
            }) && !unAll.some((j) => {
                return j.range === item.range;
            });
        }));
    }

    select(selection: any, row: any) {

        const find = this.value.find((item) => {

            return row.range === item.range;
        });
        let all: Array<{ id: number, range: string }> = this.value;
        if (!find) {
            all.push({id: row.id, range: row.range});
        }
        this.$emit('input', all);
    }

    selectCancel(selection: any, row: any) {

        let all = this.value.filter((item) => {

            return row.range !== item.range;
        });
        this.$emit('input', all);
    }

    pageChange(page: number) {
        this.currentPage = page;
        this.loading = true;
        this.$emit('on-change', {

            maxResultCount: this.pageSize,
            skipCount: (this.currentPage - 1) * this.pageSize,

        });
    }

    pageSizeChange(pageSize: number) {
        this.pageSize = pageSize;
        this.loading = true;
        this.$emit('on-change', {

            maxResultCount: this.pageSize,
            skipCount: (this.currentPage - 1) * this.pageSize,

        });
    }

    @Watch('items')
    itemsChange() {
        this.loading = false;
    }
}

</script>

<style lang="less" scoped>

</style>
